<html>
  <head>
    <title></title>
    <style>
    
      body > button { display:block; }
    
    </style>
    <script type="text/tiscript">
    
    !function() 
    {
      var other;
    
      $(#simple).onClick = function() {
        other = view.window{
				  type:View.TOOL_WINDOW,
          url: self.url("samples/sample-tool-window.htm"),
          //x:100,
          //y:100,
          width : 640,
          height : 480,
					alignment: 5
        };
      }  
      
      $(#frame).onClick = function() {
        other = view.window{
          type:View.FRAME_WINDOW,
          url: self.url("samples/sample-frame-window.htm"),
          x:100,
          y:100,
          width : 480,
          height : 320,
          state: View.WINDOW_SHOWN,
          alignment:3,
        };
      }  
      
      $(#frame-detached).onClick = function() {
        other = View.window // note .window() methods is called as a static method of View class here
        {                   // and so the window will be created in detached mode - will stay on screen even its owner is closed 
          type:View.FRAME_WINDOW,
          url: self.url("samples/sample-frame-window.htm"),
          x:100,
          y:100,
          width : 480,
          height : 320,
          state: View.WINDOW_SHOWN,
          alignment:3,
        };
      }  

      var sidebar = null;      
      
      $(#frame-sidebar).onClick = function() {
      
        var (screenX1,screenY1,screenX2,screenY2) = view.screenBox(#workarea,#rect);
      
        if(!sidebar)
          sidebar = View.window // note .window() methods is called as a static method of View class here
          {                   // and so the window will be created in detached mode - will stay on screen even its owner is closed 
            type:View.POPUP_WINDOW,
            url: self.url("samples/sample-glassy-window.htm"),
            x:screenX2 - 480 + 1,
            y:screenY1,
            width : 480,
            height : screenY2 - screenY1,
            state: View.WINDOW_SHOWN,
            alignment:7,
          };
        
        //sidebar.display(#show, #slide, #from-right, 300ms); 
        //function sidebar(progress) {
        //  sidebar.move((screenX2 - progress * 480).toInteger(),screenY1);
        //  return true;
        //}
        //sidebar.root.animate(step, 600ms);
        
      }        
      
    
     $(#custom-tool).onClick = function() {
        other = view.window{
          type:View.TOOL_WINDOW,
          url: self.url("samples/sample-window-custom.htm"),
          alignment: 5,
          screen:1,
          //x:200,
          //y:100,
          //width : 200,
          //height : 200
        };
      }      
     $(#custom-frame).onClick = function() {
        other = view.window{
          type:View.FRAME_WINDOW,
          url: self.url("samples/sample-window-custom.htm"),
          alignment: 5,
          screen:1,
          //x:200,
          //y:100,
          //width : 200,
          //height : 200
        };
      }      
      
     $(#popup).onClick = function() {
        other = view.window{
          url: self.url("samples/sample-popup.htm"),
          type: View.POPUP_WINDOW,
          state: View.WINDOW_HIDDEN, // initially hidden (for testing)
          alignment: 5,
          //x:200,
          //y:100,
          width : 200,
          height : 200
        };
      }      
      

     $(#with-params).onClick = function() {
     
        function onClose() {
          stdout.println("other window closed");
        }
     
        // opening window with passing additional onClose callback parameter
        other = view.window{
          url: self.url("samples/sample-params-window.htm"),
          x:200,
          y:100,
          width : 200,
          height : 200,
          parameters: { // view.parameters inside new window
            onClose: onClose 
          }
        };
      }      
      
      
    $(#tool-full-screen).onClick = function() {
     
        other = view.window{
          url: self.url("samples/sample-tool-window-full-screen.htm"),
          x:200,
          y:100,
          width : 200,
          height : 200,
        };
      }      
      
    $(#tool-layered).onClick = function() {
     
        other = view.window{
          url: self.url("samples/sample-layered-tool.htm"),
          alignment:5,
          direct:false
         };
      }      

    $(#ext-frame).onClick = function() {
     
        other = view.window {
          type:View.FRAME_WINDOW,
          url: self.url("samples/sample-window-extended-frame.htm"),
          width : 640,
          height : 480,
          alignment:5,
         };
      }   
      
    $(#hide).onClick = function() {
      if(other)
        other.state = View.WINDOW_HIDDEN;
    }
    $(#show).onClick = function() {
      if(other)
        other.state = View.WINDOW_SHOWN;
    }
      
  }();
    
    
    </script>
  </head>
<body>
  <button #simple>Tool window</button>
  <button #frame>Frame window</button>
  <button #custom-tool>Custom tool window</button>
  <button #custom-frame>Custom frame window</button>
  <button #popup>Popup window</button>
  <button #with-params>window with parameters</button>
  <button #ext-frame>window-frame=extended</button>
  <hr>
  <button #tool-full-screen>tool + full screen</button>
  <button #tool-layered>tool + layered</button>
  <hr>
  <button #frame-detached>"Detached" frame window</button>
  <button #frame-sidebar>"Detached" glassy sidebar window</button>
  
  <hr>
  <button #hide>hide last window</button>
  <button #show>show last window</button>
  
</body>
</html>
